<template>
  <div style="padding: 15px">
    <div class="header">
      <div class="iconfont iconjiantou" @click="goBack"></div>
      <div class="search">
        <span class="iconfont iconsearch"></span>
        <input
          type="text"
          placeholder="请输入搜索内容"
          v-model="keyword"
          @keyup.enter="sendSearch"
        />
      </div>
      <div class="btnsearch" @click="sendSearch">搜索</div>
    </div>
    <div v-if="postList.length == 0">
      <div class="history">
        <h4>历史记录</h4>
        <div class="list">
          <span
            @click="historySearch(item)"
            v-for="(item, index) in historyList"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
      <div class="hotSearch">
        <h4>热门搜索</h4>
        <div class="list">
          <span @click="historySearch('关晓彤')">关晓彤</span>
          <span @click="historySearch('周杰伦')">周杰伦</span>
          <span @click="historySearch('美女')">美女</span>
        </div>
      </div>
    </div>
    <AuthCollect
      v-for="(item, index) in postList"
      :key="index"
      :postData="item"
      @click.native="$router.push(`/postdetail?id=${item.id}`)"
    />
  </div>
</template>

<script>
export default {
  components: {
    AuthCollect: () => import("../components/AuthCollect"),
  },
  data() {
    return {
      keyword: "",
      postList: [],
      historyList: ["美女", "关晓彤", "阿信"],
    };
  },
  created() {
    if (localStorage.getItem("history")) {
      this.historyList = JSON.parse(localStorage.getItem("history"));
    }
  },
  watch: {
    keyword(nweVal) {
      if (!nweVal) {
        this.postList = [];
      }
    },
    historyList() {
      localStorage.setItem("history", JSON.stringify(this.historyList));
    },
  },
  methods: {
    goBack() {
      if (this.postList.length > 0) {
        this.keyword = "";
        this.postList = [];
      } else {
        this.$router.back();
      }
    },
    sendSearch() {
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res.data.data);
        //优化体验
        if (res.data.data.length == 0) {
          this.$toast("暂无搜索内容");
        }
        if (!this.keyword) {
          //   console.log(111);
          this.$toast("请先输入内容");
          return;
        }
        this.postList = res.data.data;
        if (this.historyList.indexOf(this.keyword) == -1) {
          this.historyList.unshift(this.keyword);
        }
      });
    },
    historySearch(keyword) {
      this.keyword = keyword;
      this.sendSearch();
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  .iconjiantou {
    font-size: 18/360 * 100vw;
  }
  .search {
    border: 1px solid rgb(114, 96, 96);
    height: 30/360 * 100vw;
    width: 250/360 * 100vw;
    border-radius: 15/360 * 100vw;
    position: relative;
    padding: 2px;
    margin-left: 6px;
    input {
      width: 95%;
      height: 100%;
      border: none;
      outline: none;
      text-indent: 25/360 * 100vw;
      margin-left: 8px;
      //   background-color: papayawhip;
    }
    .iconsearch {
      position: absolute;
      font-size: 18px;
      left: 9px;
      top: 6px;
    }
  }
  .btnsearch {
    margin-left: 13px;
  }
}
.history {
  margin: 20px 0;
  h4 {
    margin-bottom: 15px;
  }
}
.hotSearch {
  margin: 20px 0;
  h4 {
    margin-bottom: 15px;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  span {
    margin: 10px 10px;
    font-size: 15px;
  }
}
</style>